<template>
	<div>
		<!-- 头部查询框 -->
		<el-form ref="searchForm" :inline="true" :model="searchMap" style="margin-top: 20px;" >
			<el-form-item prop="phone">
				<el-input v-model="searchMap.phone" placeholder="手机号" style="width: 200px;" ></el-input>
			</el-form-item>
			<el-form-item prop="name">
				<el-input v-model="searchMap.name" placeholder="姓名" style="width: 200px;" ></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" size="medium" icon="el-icon-search" @click="getList()">查询</el-button>
				<el-button @click="restForm('searchForm')">重置</el-button>
				<el-button type="success" size="medium" @click="roleSet">角色配置</el-button>
				<el-button icon="el-icon-receiving" @click="exportPdf">PDF</el-button>
			</el-form-item>
		</el-form>
		<!-- 表格数据 -->
	  <el-table
		:data="tableData"
		style="width: 100%"
		:default-sort = "{prop: 'date', order: 'descending'}"
		@selection-change="getSelection"
		>
		<el-table-column
		  type="selection"
		  width="55">
		</el-table-column><el-table-column prop="name" label="姓名" sortable>
		</el-table-column><el-table-column prop="sex" label="性别" sortable :formatter="formatter">
		</el-table-column><el-table-column prop="account" label="账号" sortable>
		</el-table-column><el-table-column prop="birthday" label="生日" sortable>
		</el-table-column><el-table-column prop="phone" label="电话" sortable>
		</el-table-column><el-table-column prop="email" label="邮箱" sortable>
		</el-table-column>
		<el-table-column
		  align="right">
		  <template slot="header" slot-scope="scope">
				<el-button type="success" icon="el-icon-plus" circle @click="add"></el-button>
				<el-button type="danger" icon="el-icon-delete" circle @click="del"></el-button>
				<el-button icon="el-icon-download" circle @click="exportFile"></el-button>
		  </template>
		  <template slot-scope="scope">
			<el-button
			  size="mini" round
			  type="warning"
			  @click="handleEdit(scope.row.pk)">编辑</el-button>
		  </template>
		</el-table-column>
	  </el-table>
	  <!-- 分页，添加在div里面 -->
		<!-- <el-pagination
		@size-change="handleSizeChange"
		@current-change="handleCurrentChange"
		:current-page="currentPage"
		:page-sizes="[10, 20, 50,100,300,500,1000]"
		:page-size="pageSize"
		layout="total, sizes, prev, pager, next, jumper"
		:total="total">
		</el-pagination> -->
		<!-- 分页-->
		<Page :pageMessage="searchMap" :totalCounts="total" @fathermethod="getList"></Page>
		<!--  -->
		<el-drawer
		  title="用户信息"
		  :before-close="handleClose"
		  :visible.sync="dialog"
		  :destroy-on-close="destroy"
		  direction="rtl"
		  custom-class="demo-drawer"
		  ref="userDrawer"
		  size="70%"
		  >
		  <div class="demo-drawer__content">
			<el-form :inline="true" class="demo-ruleForm" label-width="150px" >
			  <el-form-item label="姓名" prop="name">
				<el-input v-model="form.name" placeholder="输入姓名" class="inputWidth"></el-input>
			  </el-form-item>
			  <el-form-item label="性别" prop="sex">
				<el-select v-model="form.sex" placeholder="-------请选择-------" clearable class="inputWidth">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
				</el-select>
			  </el-form-item>
			</el-form>
			<el-form :inline="true" class="demo-form-inline" label-width="150px" >
			  <el-form-item label="账户名" prop="account">
				<el-input v-model="form.account" placeholder="输入账户名" class="inputWidth"></el-input>
			  </el-form-item>
			  <el-form-item label="手机号" prop="phone">
				<el-input v-model="form.phone" placeholder="手机号" class="inputWidth"></el-input>
			  </el-form-item>
			</el-form>
			<el-form :inline="true" class="demo-form-inline" label-width="150px" >
			  <el-form-item label="生日">
				<div class="block">
					<el-date-picker class="inputWidth"
					  v-model="form.birthday"
					  type="date"
					  placeholder="--------选择日期--------"
					  format="yyyy-MM-dd"
					  value-format="yyyy-MM-dd">
					</el-date-picker>
				</div>
			  </el-form-item>
			  <el-form-item label="手机号" prop="email">
				<el-input v-model="form.email" placeholder="输入邮箱" class="inputWidth"></el-input>
			  </el-form-item>
			</el-form>
			<div class="demo-drawer__footer">
			  <el-button @click="dialog = false">取 消</el-button>
			  <el-button type="primary" @click="save">保存</el-button>
			</div>
		  </div>
		</el-drawer>
		<el-drawer
		  title="角色配置"
		  :before-close="handleClose2"
		  :visible.sync="dialog2"
		  :destroy-on-close="destroy"
		  direction="rtl"
		  custom-class="demo-drawer"
		  ref="drawer"
		  size="50%"
		  >
		  <div class="demo-drawer__content">
		    <div>
				<el-tree
				  :data="treeData"
				  show-checkbox
				  default-expand-all
				  node-key="pk"
				  ref="tree"
				  highlight-current
				  :props="treeProps">
				</el-tree>
		    </div>
			<div class="demo-drawer__footer">
			  <el-button @click="dialog2 = false">取 消</el-button>
			  <el-button type="primary" @click="saveRole">保存</el-button>
			</div>
		  </div>
		</el-drawer>
	</div>
</template>

<script>
  import Page from "@/components/common/pageHapler.vue"
  export default {
    data() {
      return {
		 options: [{
          value: 1,
          label: '男'
        }, {
          value: 2,
          label: '女'
        }],
		pks:'',
		form: {
			name:"",
			account:"",
			phone:""
		},
		destroy:true,
		showClose:false,
		dialog:false,
		dialog2:false,
		formLabelWidth: '150px',
		loading: false,
		total: 50, // 总记录数
		//: 1, // 当前页, 默认第1页
		//pageSize: 2, // 每页显示条数， 10条
		searchMap: {
			name: '',
			phone: '',
			currentPage:1,
			pageSize:10
		}, // 条件查询
        tableData: [],
		treeData:[],
		treeProps:{
			pk:"pk",
			children:'children',
			label:'label'
		}
      }
    },
    methods: {
		formatter(row, column) {
			return row.sex==1?'男':'女';
		},
		/* handleSizeChange(val) {
			this.searchMap.pageSize = val
			this.getList()
		},
		handleCurrentChange(val) {
			this.searchMap.currentPage = val
			this.getList()
		}, */
		// 表单重置，
		// 在 el-form-item 标签属性 prop 上, 指定了字段名, 重置才会生效
		restForm(formName) {
			this.$refs[formName].resetFields();
		},
		add(){//新增
			this.dialog = true
			this.form={}
			/* this.$nextTick(()=>{//异步事件，当渲染结束之后，他的回调函数才会被执行，弹出窗口打开之后，需要加载Dom，就需要花费一点时间
								//我们应该等待Dom加载完成后再去rest表单
				this.$refs['userDrawer'].resetFields();
			}) */
			/* this.$nextTick(() => {
			// this.$nextTick()它是一个异步事件，当渲染结束 之后 ，它的回调函数才会被执行
			// 弹出窗口打开之后 ，需要加载Dom, 就需要花费一点时间，我们就应该等待它加载完dom之后，再进行调
			//用resetFields方法，重置表单和清除样式
			this.$refs['form'].resetFields()
			}) */
		},
		handleEdit(pk){//编辑
			this.dialog=true
			this.getDetail(pk);
		},
		del(){//删除
			if(this.pks==''){
				this.$message.error('请选中要删除项');
			}else{
				this.$confirm('确定要删除吗, 是否继续?', '提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'warning'
				}).then(() => {
					this.getAxios("sysUser/delete/"+this.pks).then(resp=>{
						console.log(resp)
						if(resp.code==200){
							this.getList();
						}else{
							this.$message.error(resp.message);
						}
					})
				}).catch(() => {
				  this.$message({
					type: 'info',
					message: '已取消删除'
				  });          
				});
			}
		},
		//导出excel
		exportFile(){
			location.href=process.env.VUE_APP_BASE_API+"/sysUser/export";
		},
		//导出pdf
		exportPdf(){
			location.href=process.env.VUE_APP_BASE_API+"/sysUser/exportPdf";
		},
		save(){//保存
			this.postAxios("sysUser/save",{jsonstr:JSON.stringify(this.form)}).then(resp=>{
				if(resp.code==200){
					this.$message.success(resp.message);
					this.dialog=false;
					this.getList();
				}else{
					this.$message.error(resp.message);
				}
			})
		},
		getSelection(selection){//获取选中的pk
			var pks = "";
			for (var i = 0; i < selection.length; i++) {
				pks+=selection[i].pk
				if(i!=selection.length-1){
					pks+=",";
				}
			}
			this.pks=pks;
		},
		handleClose(done) {//关闭弹出框
			this.dialog=false
		},
		handleClose2(done) {//关闭弹出框
			this.dialog2=false
		},
		getList(val,num){//获取首页列表数据
			if(val!=""&&num==1){
				this.searchMap.pageSize=val
			}
			if(val!=""&&num==2){
				this.searchMap.currentPage=val
			}
			this.postAxios("sysUser/list",{str:JSON.stringify(this.searchMap)}).then(resp=>{
				if(resp.code==200){
					this.tableData=resp.data.list;
					this.total=resp.data.total;
				}else{
					this.$message.error(resp.message);
				}
			})
		},
		getDetail(pk){//获取详情
			this.getAxios("sysUser/query/"+pk).then(resp=>{
				if(resp.code==200){
					this.form=resp.data;
				}else{
					this.$message.error(resp.message);
				}
			})
		},
		getTreeList(){//获取角色树
			this.getAxios("sysUser/getRoleTree").then(resp=>{
				if(resp.code==200){
					this.treeData=[];
					this.treeData.push(resp.data);
				}
			})
		},
		roleSet(){//角色配置
			if(this.pks==""){
				this.$message.error("您尚未选中项");
				return
			}
			if(this.pks.split(",").length>1){
				this.$message.error("只能选中一项");
				return;
			}
			this.dialog2=true;
			this.getTreeList();
			//查询选中项
			this.getAxios("sysUser/getSelectedTree/"+this.pks).then(resp=>{
				if(resp.code==200){
					this.setCheckedKeys(resp.data);
				}
			})
		},
		saveRole(){//保存角色
			const sysUser={};
			var rolePkList="";
			const rolePks=this.getCheckedKeys();
			if(rolePks.length>0){
				for (var i = 0; i < rolePks.length; i++) {
					rolePkList+=rolePks[i];
					if(i!=rolePks.length-1){
						rolePkList+=",";
					}
				}
			}
			sysUser.pk=this.pks;
			sysUser.rolePk=rolePkList;
			this.postAxios("sysUser/save",{jsonstr:JSON.stringify(sysUser)}).then(resp=>{
				if(resp.code==200){
					this.dialog2=false;
				}else{
					this.$message.error(resp.message);
				}
			})
		},
		getCheckedKeys() {
			return this.$refs.tree.getCheckedKeys();
		},
		setCheckedKeys(list) {
			this.$refs.tree.setCheckedKeys(list);
		},
		resetChecked() {
			this.$refs.tree.setCheckedKeys([]);
		}
    },
	mounted(){
		this.getList();
	},
	components:{
		Page
	},
  }
</script>
<style scoped>
	.demo-drawer__content{
		padding: 20px;
	}
	.demo-drawer__footer{
		text-align: center;
	}
	.inputWidth{
		width: 300px;
	}
	.el-drawer__header{
		text-align: center;
	}
</style>